<template>
	<div class="hrnotice">
		<div v-show="!ishow">
			<a class="breadcrumb" @click="handleCancle" href="javascript:;">公告管理</a>&nbsp;&nbsp;/&nbsp;&nbsp;
			<a style="color: #606266">{{pageType=='see'?'查看':''}}</a>
			<a style="color: #606266">{{pageType=='edit'?'编辑':''}}</a>
			<a style="color: #606266">{{pageType=='add'?'新建':''}}</a>
		</div>
		<div class="notice" v-show="ishow">
			<el-form :inline="true" :model="params" class="demo-form-inline">
				<el-form-item label="发布人：">
					<el-input v-model="publisherOrPhone" placeholder="昵称/手机号"></el-input>
				</el-form-item>
				<el-form-item label="发布时间:" prop="time">
					<el-date-picker
						v-model="params.time"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="pickerOptions"
						@change="changeDate">
					</el-date-picker>
				 </el-form-item>
				<el-form-item label="标题：">
					<el-input v-model="title" placeholder="请输入标题名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
					<el-button type="primary" @click="newbuilt">新建</el-button>
				</el-form-item>
			</el-form>
			<div class="content">
				<ul v-show="listdata.length">
					<li class="item" v-for="(item,idx) in listdata" :key="idx">
						<div class="left">
							<h3 class="title">标题: {{item.title}}</h3>
							<p class="text">正文: {{item.text}}</p>
							<div>
								<span>{{item.publisher}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
								<span class="date">
									{{item.createTime}}
								</span>
								<span class="prop">
									<span class="popupDays" v-show="item.popDays">弹窗天数：{{item.popDays}}天</span>
									<span class="popupTimes" v-show="item.popTimes">弹窗次数：{{item.popTimes}}次</span>
								</span>
							</div>
						</div>
						<div class="right">
							<div><el-button type="text" @click="clickhander('edit',item)">编辑</el-button></div>
							<div><el-button type="text" @click="clickhander('see',item)" >查看</el-button></div>
							<div><el-button type="text" @click="delhander(item)">删除</el-button></div>
						</div>
					</li>
				</ul>
				<div v-show="!listdata.length" class="no-data">还没有发布的公告！</div>
			</div>
			<div class="pagebar">
			  <el-pagination
			    background
			    layout="total, sizes, prev, pager, next"
			    :current-page.sync="currentPage"
			    :page-sizes="[5, 15, 20, 25]"
			    :page-size="pageSize"
			    @size-change="handleSizeChange"
			    @current-change="handleCurrentChange"
			    :total="totalSize">
			  </el-pagination>
			</div>
		</div>
		<!-- 新增 编辑 查看 -->
		<div class="operatedetail" v-show="!ishow">
			<div class="operatetitle">
				<el-input v-model="wintitle" placeholder="标题" :disabled="pageType =='see'" maxlength="50"></el-input>
			</div>
			<!-- <editor v-model="winnotice" @input="getnotice" :disabled="pageType=='see'"></editor> -->
       <ckeditor  v-model="winnotice" @input="getnotice" :disabled="pageType=='see'"  ></ckeditor>
			<div class="isPop">
				<span>是否弹窗：</span>
				<el-radio v-model="radio" label="1" :disabled="pageType =='see'?true:false" @change="changeRadio">是</el-radio>
				<el-radio v-model="radio" label="0" :disabled="pageType =='see'?true:false" @change="changeRadio">否</el-radio>
			</div>
			<div class="popSet">
				<el-form :inline="true" :model="popSetData" class="demo-form-inline">
					<el-form-item label="弹窗次数：" style="color:#2c3e50">
						<el-input v-model="popSetData.days" size="mini" :disabled="pageType =='see' || radio == 0?true:false"></el-input><span>天</span><br>
						<el-input v-model="popSetData.times" size="mini" :disabled="pageType =='see'|| radio == 0?true:false"></el-input><span>次/天</span>
					</el-form-item>
				</el-form>
			</div>
			<div class="btngroup" v-show="pageType == 'edit' || pageType == 'add'">
				<el-button type="primary" @click="save">保存</el-button>
				<el-button type="primary" @click="handleCancle">取消</el-button>
			</div>
			<div class="recode" v-show="pageType == 'see'">
				<h3>操作记录</h3>
				<el-table :data="operationLog" border stripe style="width: 70%">
				  <el-table-column  label="操作">
				  	<template slot-scope="scope">
					  	{{scope.row.operation == 1? '新增':''}}
					  	{{scope.row.operation == 2? '编辑':''}}
				  	</template>
				  </el-table-column>
				  <el-table-column prop="publisher" label="操作人"></el-table-column>
				  <el-table-column prop="typeName" label='角色'></el-table-column>
				  <el-table-column prop="createTime" label="操作时间" width="160"></el-table-column>
				</el-table>
			</div>
 		</div>
	</div>
</template>
<script>
 import api from '@/api/apiPath'
 import TimeComp from '../common/timeComp'
 import Editor from '../common/VueEditor'
 import ckeditor from '../common/ckeditor'
 export default {
 	name:'HrNotice',
	title:'管家端公告配置',
 	components:{TimeComp,Editor,ckeditor},
 	data () {
 	  return {
			radio: '1',
			popSetData: {
				days: '',
				times: ''
			},
 	  	publisherOrPhone:'',//发布人
 	  	listdata:[],
 	  	itemdata:undefined,
 	  	pageType:'',
 	  	ishow:true,//true公告管理 false操作页面
 	  	title:'',
 	  	params:{
 	  		userName:'hh',
 	  		time:[],//发布时间
 	  		startTime:'',//开始时间
 	  		endTime:'', //结束时间
 	  	},
 	  	currentPage: 1,
 	  	pageSize: 5,//每页几条
 	  	totalSize: 0,
 	  	wintitle:'',
 	  	winnotice:'',
 	  	operationLog:[],
 	  	pickerOptions: {
 	  	  disabledDate(time) {
 	  	    return time.getTime() > Date.now() - 8.64e6;
 	  	  }
       },
 	  }
 	},
 	created(){
		this.getdata();
 	},
 	activated(){
		this.getdata();
 	},
 	mounted(){
 		this.$bus.$on('showpanel',e => {
 			this.ishow = true;
 		})
 	},
 	beforeDestroy () {
 	    this.$bus.$off('showpanel')
 	},
 	methods:{
		 changeRadio(val){
			if(val == 0){
				this.popSetData.days = ''
				this.popSetData.times = ''
			}
		 },
 		getdata(){
 			let tempobj = {}
 			tempobj.pageNum = this.currentPage;
 			tempobj.pageSize = this.pageSize;
 			tempobj.title = this.title;
 			tempobj.beginTime = this.params.startTime;
 			tempobj.endTime = this.params.endTime;
 			tempobj.publisherOrPhone = this.publisherOrPhone;
			this.axios.post(api.ANNOUNCEGETLIST,tempobj).then(res => {
				if(res.data.code != 200){
					this.$message(res.data.msg)
				}else{
					if(res.data.data){
						//js过滤掉所有的html标签
						let arrtemp = res.data.data.list;
						arrtemp.forEach((item,index) => {
							item.text = item.text.replace(/<\/?.+?>/g,"");
							if(item.title.length >20){
								item.title = item.title.slice(0,20) + '...'
							}
							if(item.text.length>30){
								item.text = item.text.slice(0,30)+'...'
							}
						})
						this.listdata = arrtemp;
						this.totalSize = res.data.data.totalRows; 
					}else{
						this.listdata = []
						this.totalSize = 0
					}
				}
			})
 		},
 		// date查询
 		changeDate (val) {
 			const startTime1 = val ? val[0] : ''
 			this.params.startTime = startTime1 ? this.getTimeString(startTime1) : undefined
 			const endTime1 = val ? val[1] : ''
 			this.params.endTime = endTime1 ? this.getTimeString(endTime1) : undefined
 		},
 		getTimeString(timestamp){
 			const time = new Date(timestamp)
 			let dateStr = ''
 			const year = time.getFullYear()
 			const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
 			const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
 			dateStr = year + '-' + month + '-' + day
 			return dateStr 
 		},
 		query(){
 			this.getdata();
 		},
 		delhander(val){
 			this.$confirm('是否删除该公告?', '提示', {
 			  confirmButtonText: '确定',
 			  cancelButtonText: '取消',
 			  type: 'warning'
 			}).then(() => {
				this.axios.get(api.ANNOUNCEDEl+val.id,{id:val.id}).then(res => {
					if (res.data.code != 200) {
						this.$message(res.data.msg)
					}else{
						this.$message.success('删除成功');
						this.getdata();
					}
				})
 			}).catch(() => {
 			  this.$message({
 			    type: 'info',
 			    message: '已取消删除'
 			  });          
 			});
 		},
 		newbuilt(){
 			this.wintitle = '';
 			this.winnotice = '';
 			this.ishow = !this.ishow;
 			this.pageType = 'add';
 		},
 		getnotice(val){
 			this.winnotice = val
 		},
 		//获取指定公告接口
 		clickhander(val,data){
			 this.ishow = !this.ishow;
 			this.pageType = val;
 			this.$nextTick(()=>{
	 			this.axios.get(api.ANNOUNCEGETBYID+data.id,{id:data.id}).then(res => {
					 console.log(res);
					 
					if(res.data.code != 200){
						this.$message(res.data.msg)
					}else{
						this.itemdata = res.data.data;
						console.log(this.itemdata)
						this.wintitle = this.itemdata.title;
						this.winnotice = this.itemdata.text;
						this.operationLog = this.itemdata.operationLog;
						this.radio = this.itemdata.popFlag  + ''
						this.popSetData.days = this.itemdata.popDays
						this.popSetData.times = this.itemdata.popTimes
					}
				})
 			})
 		},
 		handleCurrentChange () {
 		  this.getdata();
 		},
 		handleSizeChange (val) {
 		  this.pageSize = val
 		  this.getdata();
		 },
		//  取消
		handleCancle(){
			this.ishow = !this.ishow;
			this.popSetData.days = ''
			this.popSetData.times = ''
		},
		//  保存
 		save(){
 			if (this.wintitle == '') {
 				this.$message({
 				  message: '标题不能为空',
 				  type: 'warning'
 				});
 				return
 			}
 			if (this.winnotice == '') {
 				this.$message({
 				  message: '内容不能为空',
 				  type: 'warning'
 				});
 				return 
			}
			if(this.radio == ''){
 				this.$message({
 				  message: '选择是否弹窗',
 				  type: 'warning'
				 });
				 return
			}else{
				if(this.radio == 1){
					if(this.popSetData.days == ''){
						this.$message({
							message: '天数不能为空',
							type: 'warning'
						});
						return
					}else if(isNaN(this.popSetData.days)){
						this.$message({
							message: '天数请输入数字',
							type: 'warning'
						});
						return
					}else if(this.popSetData.days > 15){
						this.$message({
							message: '天数不能超过15天',
							type: 'warning'
						});
						return
					}else if(this.popSetData.days <= 0){
						this.$message({
							message: '天数不能小于等于0',
							type: 'warning'
						});
						return
					}else if((this.popSetData.days+'').indexOf('.') !=-1){
						this.$message({
							message: '天数不能输入小数',
							type: 'warning'
						});
						return
					}
					if(this.popSetData.times == ''){
						this.$message({
							message: '次数不能为空',
							type: 'warning'
						});
						return
					}else if(isNaN(this.popSetData.times)){
						this.$message({
							message: '次数请输入数字',
							type: 'warning'
						});
						return
					}else if(this.popSetData.times > 6){
						this.$message({
							message: '次数不能超过6次',
							type: 'warning'
						});
						return
					}else if(this.popSetData.times <= 0){
						this.$message({
							message: '次数不能小于等于0',
							type: 'warning'
						});
						return
					}else if((this.popSetData.times+'').indexOf('.') !=-1){
						this.$message({
							message: '次数不能输入小数',
							type: 'warning'
						});
						return
					}
				}
			}
			switch(this.pageType)
			{
				case 'edit':
					let tempobj = {};
					tempobj.title = this.wintitle;
					tempobj.text = this.winnotice;
					tempobj.id = this.itemdata.id;
					tempobj.popFlag = this.radio
					tempobj.popDays = this.popSetData.days
					tempobj.popTimes = this.popSetData.times
					this.axios.post(api.ANNOUNCEUPDATE,tempobj).then(res =>{
						if (res.data.code != 200) {
							this.$message(res.data.msg)
						}else{
							this.ishow = !this.ishow;
							this.popSetData.days = ''
							this.popSetData.times = ''
							this.getdata();
						}
					})
					break;
				case 'add':
					let obj = {};
					obj.title = this.wintitle;
					obj.text = this.winnotice;
					obj.popFlag = this.radio
					obj.popDays = this.popSetData.days
					obj.popTimes = this.popSetData.times
					this.axios.post(api.ANNOUNCEADD,obj).then(res => {
						if(res.data.code != 200){
							this.$message(res.data.msg)
						}else{
							this.ishow = !this.ishow;
							this.popSetData.days = ''
							this.popSetData.times = ''
							this.getdata();
						}
					})
					break;
				default:
					break;
			}
 		}
 	}
 }
	
</script>
<style  scoped lang="stylus">
	.hrnotice {
		width: 80%;
	}
	.no-data{
		text-align :center;
		font-size :16px;
	}
	ul,li {
		list-style: none;
	}
	.title {
		font-size: 16px;
	}
	.date > div {
		display: inline-block;
	}
	.content .item {
		display: flex;
		padding: 10px;
		margin-right: 20px;
		border-bottom: 1px solid rgba(0, 0, 0, .1)
	}
	.content .item .right{
		// flex: 0 0 10%;
		width: 10%;
		text-align: center;		
	}
	.content .item .left{
		// flex: 1;
		width: 90%;
		
	}
	.content .text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.operatetitle {
		margin: 20px 0;
		width: 80%;
	}
	.btngroup {
		width: 80%;
		margin: 30px 0;
		text-align: center;
	}
	.btngroup .el-button--primary{
		margin:  0 20px;
	}
	.recode {
		width: 80%;
		margin-top: 40px;
	}
	.breadcrumb{
		text-decoration: none;
		font-size: 18px;
		font-weight: 700;
		color: #303133;
	}
	.prop{
		float :right;
		margin-right :20%;
	}
	.popupDays{
		margin-right:30px;
	}
	.isPop{
		margin-top :20px;
		font-size :14px;
	}
	.popSet{
		margin-top :20px;
	}
	.el-form-item{
		color: #2c3e50!important;
	}
	.popSet .el-input{
		width:150px!important;
	}
</style>